<template>
    <div id="sankeychart">
        <div id="sankey"></div>
        <div id="sankeyData">
            <el-select v-model="selectValue" placeholder="" @change="layoutChange()">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </div>
    </div>
</template>
<script>
import {SankeyChart} from './SankeyChart'
export default {
  data () {
    return {
      sankeyData: [],
      sankeyChart: '',
      options: [
        {
          label: '右',
          value: 'sankeyRight'
        },
        {
          label: '中心',
          value: 'sankeyCenter'
        },
        {
          label: '自适应',
          value: 'sankeyJustify'
        },
        {
          label: '左',
          value: 'sankeyLeft'
        }
      ],
      selectValue: 'sankeyCenter'
    }
  },
  created () {
    this.sankeyChart = new SankeyChart('sankey')
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let {data: res} = await this.$http.get('./static/data/sankey.json')
      this.sankeyData = res
      this.sankeyChart.data = this.sankeyData
      this.sankeyChart.draw()
    },
    layoutChange () {
      this.sankeyChart.layout = this.selectValue
      this.sankeyChart.changeLayout()
    }
  }
}
</script>
<style scoped>
#sankeychart {
    height: 100%;
    width: 100%;
}
#sankey {
    height: 70%;
    width: 100%;
}
#sankeyData {
    height: 30%;
    width: 100%;
}
</style>
